﻿<!doctype html>
<html>

<head>
    <title></title>
    <vt:include file="inc/meta.inc" />
    <link href="Styles/Course.css?ver={$version}" rel="stylesheet" type="text/css" />
    <link href="/Utility/CoreStyles/Jme.css?ver={$version}" rel="stylesheet" type="text/css" />
</head>

<body>
    <div id="vapp" v-cloak>
        <div class="loading" v-if="loading"></div>
        <div class="photo" v-if="JSON.stringify(course)!='{}'">
            <img id="default-img" src="images/cou_nophoto.jpg" style="display: none;" />
            <img :src="course.Cou_Logo" v-if="course.Cou_Logo!=''">
            <img :src="defimg" v-else>
            <div class="couName" v-html="course.Cou_Name">
            </div>
        </div>
        <div class="photo" v-else>
            <img src="images/cou_nophoto.jpg" />
            <div class="couName">
                (当前课程不存在，或课程被暂停学习)
            </div>
        </div>
        <div id="Context">
            <div class="info">
                <i class="viewnum">{{course.Cou_ViewNum}}</i> / <i class="studynum">{{sum}}</i>人学习
                <template v-if="!config.IsMobileRemoveMoney">
                    / <span class="moneyfree" v-if="course.Cou_IsFree || course.Cou_IsLimitFree">
                        <i class="free" v-if="course.Cou_IsFree">免费</i>
                        <i class="free" v-if="course.Cou_IsLimitFree"> 限时免费</i>
                        <span v-if="course.Cou_IsLimitFree">（{{course.Cou_FreeStart|date('yyyy/M/d')}}
                            - {{course.Cou_FreeEnd|date('yyyy/M/d')}}）</span>
                    </span>
                    <span class="money" v-for="p in prices" v-if="prices.length>0" :title="'可以用券抵扣'+p.CP_Coupon+'元'">
                        <i class="p-span " v-html="p.CP_Span"></i>
                        <i class="p-unit" v-html="p.CP_Unit"></i>
                        <i class="p-num">{{p.CP_Price}}元</i>
                    </span>
                    <span class="money" v-else>未设置价格（非免费课程）</span>
                </template>
            </div>
            <!--选项卡-->
            <div class="control">
                <a :class="{'control-item':true, 'active':showState==1}" href="#item1" @tap="showState=1">详情 </a>
                <a :class="{'control-item':true, 'active':showState==2}" href="#item1" @tap="showState=2"> 章节 </a>
                <a :class="{'control-item':true, 'active':showState==3}" href="#item1" @tap="showState=3">公告 </a>
            </div>
            <div class="control-content">
                <div class="details" style="display: block" v-show="showState==1">

                    <div id="teacher" v-if="teacher!=null ">
                        <div class="teacher-tit">主讲教师：</div>
                        <div class="thPhoto" v-if="teacher.Th_Photo!=''"
                            :style="'background:url('+teacher.Th_Photo+') no-repeat center'"> &nbsp;
                        </div>
                        <img v-else class="thPhoto" src="images/nophoto.jpg" />
                        <div class="thRight">
                            <div class="thName"> {{teacher.Th_Name}}</div>
                            <div class="thSign"> {{teacher.Th_Signature}}</div>
                        </div>
                    </div>

                    <!--主讲教师结束-->
                    <div class="introBox">
                        <template v-if="course.Cou_Target!=''">
                            <span>学习目标：</span>
                            <div class="couTarget" v-html="course.Cou_Target"></div>
                        </template>
                        <div v-html="course.Cou_Intro" v-if="course.Cou_Intro!=''"></div>
                        <div v-else> 当前课程没有编辑详细资料。</div>

                    </div>
                </div>
                <div class="outlines" v-show="showState==1 || showState==2">
                    <div class="olitem" :olid="o.Ol_ID" v-for="o in outlines"
                        :style="'padding-left:'+(o.Ol_Level*20)+'px'">
                        <span class="ol_name">{{o.Ol_XPath}}{{o.Ol_Name}}
                            <span v-if="!o.Ol_IsFinish" class="nofinish">未完结</span>
                        </span>
                    </div>
                </div>
                <div v-show="showState==3">
                    <dl remark="课程公告">
                        <dd v-for="(g,i) in guides"><a :href="'Guide.ashx?id='+g.Gu_Id"
                                target="_blank">{{i+1}}.{{g.Gu_Title}}</a>
                        </dd>
                    </dl>
                </div>
            </div>
        </div>
        <div class="cour-footer" v-show="!loading">
            <div class="couBtnBox">
                <!--按钮开始-->
                <div class="couBtn" v-if="JSON.stringify(course) === '{}'"> 课程不存在或被禁用</div>
                <a class="couBtn" v-else-if="account==null" type="link" href="Login.ashx" target="_top"
                    title="请选登录">登录学习</a>

                <template v-else>
                    <template v-if="course.Cou_IsFree || course.Cou_IsLimitFree || isbuy">
                        <div class="couBtn study"> <a :href="'CoursePage.ashx?couid='+course.Cou_ID" type="link"
                                target="_top" class="bvr_mr" title="开始学习">开始学习</a></div>
                    </template>
                    <template v-else-if="course.Cou_IsTry">
                        <div class="couBtn btn1 study"> <a :href="'CoursePage.ashx?couid='+course.Cou_ID" type="link"
                                target="_top" class="bvr_mr" title="开始学习">试学</a></div>
                        <div class="couBtn btn2"> <a :href="'CourseBuy.ashx?couid='+course.Cou_ID"
                                :isPass="account.Ac_isPass" state="noSelected" type="link" target="_top"
                                title="选修该课程">选修该课程</a>
                        </div>
                    </template>
                    <template v-else>
                        <div class="couBtn"> <a :href="'CourseBuy.ashx?couid='+course.Cou_ID"
                                :isPass="account.Ac_isPass" state="noSelected" target="_top" type="link"
                                title="选修该课程">选修该课程</a> </div>
                    </template>
                </template>



                <!--按钮结束-->
            </div>
        </div>
    </div>

</body>
<script type="text/javascript" src="Scripts/Course.js?ver={$version}"></script>

</html>